<template>
  <a-form :form="conceptMapForm">
    <a-form-item
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      label="选择概念">
      <a-select
        @change="conceptChange"
        v-decorator="['conceptId', {rules: [{required: true, message: '请选择概念!'}]}]"
        placeholder="选择概念">
        <a-select-option v-for="(item,index) in conceptList" :key="index" :value="item.id">{{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-divider>属性配置</a-divider>
    <a-row
      type="flex"
      style="margin-bottom: 12px">
      <a-col
        flex="1"
        style="text-align: center"
        v-for="(item) in propertiesListMappingTitle"
        :key="item">
        <span style="font-weight: bold">
          {{ item }}
        </span>
      </a-col>
    </a-row>
    <a-row
      v-for="(it,index) in propertiesList"
      :value="it.id"
      :key="it.id"
      type="flex">
      <a-col
        style="text-align: center"
        flex="1">
        <a-form-item>
          <div style="display: inline-flex;justify-content: center;align-items: center">
            <span style="font-size: 14px">
              {{ it.chName }}
            </span>
          </div>
        </a-form-item>
      </a-col>
      <a-col
        style="text-align: center"
        flex="1">
        <a-form-item>
          <a-select
            style="width: 90%"
            :default-value="it.columnId"
            @change="(v)=>columnNameChange(v,index)"
            placeholder="请选择内容">
            <a-select-option
              v-for="(item) in contentColumns"
              :key="item.id"
              :value="item.id">
              {{ item.columnChname }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col
        style="text-align: center"
        flex="1">
        <a-form-item>
          <a-select
            style="width: 90%"
            @change="(v)=>propertiesList[index].handleType=v"
            :default-value="it.handleType"
            placeholder="请选择加工选项">
            <a-select-option
              v-for="(item) in handleTypeList"
              :key="item.id"
              :value="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col
        style="text-align: center"
        flex="1">
        <a-form-item>
          <a-select
            style="width: 90%"
            @change="(v)=>propertiesList[index].handleDic=v"
            :default-value="it.handleDic"
            placeholder="请选择加工字典">
            <a-select-option
              v-for="(item) in handleDicList"
              :key="item.id"
              :value="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col
        style="text-align: center"
        flex="1">
        <a-form-item>
          <a-select
            style="width: 90%"
            @change="(v)=>propertiesList[index].handleModel=v"
            :default-value="it.handleModel"
            placeholder="请选择加工模型">
            <a-select-option
              v-for="(item) in handleModelList"
              :key="item.id"
              :value="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { schemaList } from '@/api/modular/main/knowl/schema/schemaManage'
import { propertyPage } from '@/api/modular/main/knowl/property/propertyManage'
import { addCatchTask } from '@/api/modular/main/knowl/catchtask_config/catchTaskConfigManager'

export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      },
      conceptMapForm: this.$form.createForm(this),
      responseValue: undefined,
      conceptName: undefined,
      contentColumns: [],
      conceptList: [],
      handleModelList: [],
      handleTypeList: [],
      handleDicList: [],
      propertiesList: [],
      propertiesListMappingTitle: ['模板属性', '内容', '加工选项', '加工字典', '加工模型'],
      detail: undefined
    }
  },
  methods: {
    setDetail(e) {
      this.detail = e
    },
    setResponseValue(responseValue) {
      this.responseValue = responseValue
      this.contentColumns = responseValue['catchColumns']
    },
    onInit() {
      this.loadSchemaList()
      const parentIdOption = this.$options
      this.handleModelList = parentIdOption.filters['dictData']('handle_model')
      this.handleTypeList = parentIdOption.filters['dictData']('handle_type')
      this.handleDicList = parentIdOption.filters['dictData']('handle_dic')
    },
    columnNameChange(v, index) {
      const columnInfo = this.contentColumns.find((i) => i.id === v)
      if (columnInfo) {
        console.log(columnInfo)
        const prop = this.propertiesList[index]
        prop['columnName'] = columnInfo['columnChname']
        prop['columnId'] = columnInfo['id']
        this.propertiesList.splice(index, 1, prop)
      }
    },
    conceptChange(v) {
      const item = this.conceptList.find((it) => it.id === v)
      this.conceptName = item ? item.name : undefined
      this.propertiesList = []
      this.loadProperty(v)
    },
    loadProperty(id) {
      propertyPage({ 'schemaId': id })
        .then((res) => {
          this.propertiesList = res['data']['rows']
        })
        .catch((e) => {
          console.log(e)
        })
    },
    loadSchemaList() {
      this.propertiesList = []
      schemaList({})
        .then((res) => {
          this.conceptList = res['data']
          const entity = this.detail
          if (entity && entity.conceptId) {
            this.conceptMapForm.setFieldsValue({
              'conceptId': entity.conceptId
            })
            this.conceptName = entity.conceptName
            propertyPage({ 'schemaId': entity.conceptId })
              .then((res) => {
                const conceptMappings = this.detail.conceptMappings
                const properties = res['data']['rows']
                properties.forEach((it) => {
                  const proper = conceptMappings.find((i) => i['propertyId'] === it['id'])
                  if (proper) {
                    const column = this.contentColumns.find((i) => i.id === proper['columnId'])
                    it['columnName'] = column ? column['columnChname'] : undefined
                    it['columnId'] = column ? column['id'] : undefined
                    it['handleDic'] = proper['handleDic']
                    it['handleModel'] = proper['handleModel']
                    it['handleType'] = proper['handleType']
                  }
                })
                this.propertiesList = properties
              })
              .catch((e) => {
                console.log(e)
              })
          }
        }).catch(() => {
      })
    },
    insertValue(values, id) {
      this.$emit('loading')
      addCatchTask(values, id)
        .then((res) => {
          if (res.success) {
            this.$emit('handleCancel')
            this.$message.success('操作成功!')
          } else {
            this.$message.error(res.message)
          }
        })
        .catch((e) => {
          console.log(e)
        })
        .finally(() => {
          this.$emit('dismiss')
        })
    },
    saveOrUpdate(id) {
      const { conceptMapForm: { validateFields } } = this
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof (values[key]) === 'object') {
              values[key] = JSON.stringify(values[key])
            }
          }
          if (this.propertiesList.length <= 0) {
            this.$message.error('属性不能为空!')
            return
          }
          let msg
          for (let i = 0; i < this.propertiesList.length; i++) {
            const properties = this.propertiesList[i]
            if (!properties['columnName']) {
              msg = '请选择内容'
              break
            }
            if (!properties['handleType']) {
              msg = '请选择加工选项'
              break
            }
            if (!properties['handleDic']) {
              msg = '请选择加工字典'
              break
            }
            if (!properties['handleModel']) {
              msg = '请选择加工模型'
              break
            }
          }
          if (msg) {
            this.$message.error(msg)
            return
          }
          const params = {}
          params['id'] = this.responseValue['id']
          params['conceptName'] = this.conceptName
          params['conceptId'] = values['conceptId']
          const conceptMappings = []
          this.propertiesList.forEach((it) => {
            const child = {}
            child['taskId'] = params['id']
            child['conceptId'] = values['conceptId']
            child['conceptName'] = this.conceptName
            child['columnId'] = it['columnId']
            child['columnName'] = it['columnName']
            child['propertyId'] = it['id']
            child['propertyName'] = it['chName']
            child['handleType'] = it['handleType']
            child['handleDic'] = it['handleDic']
            child['handleModel'] = it['handleModel']
            conceptMappings.push(child)
          })
          params['conceptMappings'] = conceptMappings
          params['step'] = 3
          this.insertValue(params, id)
        }
      })
    },
    dispose() {
      this.propertiesList = []
      this.conceptList = []
      this.conceptMapForm.resetFields()
      this.handleDicList = []
      this.conceptName = undefined
      this.detail = undefined
      this.handleModelList = []
      this.handleTypeList = []
    }
  }
}
</script>

<style scoped>

</style>
